<template>
    <div class="screen-block">
        <h2 class="title" >
             <span class="name" v-text="title"></span>
             <div class="date-wrap">
                <slot name="header"></slot>
             </div>
        </h2>
        <div class="screen-chart-wrap">
            <div class="screen-chart-box" ref="box">
                <slot ></slot>
            </div>
        </div>
    </div>
</template>
<script>
import delegate from '../js/event.js';
import { debuglog } from 'util';
export default {
    props: {
        title: {
            type: String,
            default: 'chart名称'
        }
    },
    data() {
        return {
            
        }
    },
    mounted(){
        
    },
    methods:{
       
    }
}
</script>
<style lang="scss" >
    .screen-block{
        .title{
            position: relative;
            display: flex;
            text-align: left;
            border-bottom: 2px solid #131b59;
            height: 60px;
            align-items: center;
            font-size: 12px;
            .name{
                font-size: 16px;
                 color: #fff;     
            }
            &::after{
                position: absolute;
                content: '';
                width: 8px;
                height: 4px;
                bottom: -3px;
                left: 0;
                background-color: #47e1ff;
            }
            .date-wrap{
                position: absolute;
                right: 0;
                top: 0;
                z-index: 10;
            }
            .ivu-input{
                background-color: transparent;
                border: 1px solid #026b95;
                color: #026b95;
            }
        }
        .screen-chart-box{
            min-height:250px;
        }

        &.style1{
            .title{
                border-bottom: 2px solid transparent;
                 &:after{
                    display: none;
                }
            }
           
        }
    }
</style>

